<template>
	<view class="new_comer_challenge">
		<view class="head">
			<uni-icons color="#2359f8" size="20" type="vip-filled"></uni-icons>
			<view class="title">{{ title }}</view>
			<uni-icons class="right" color="#999999" size="16" type="right" @click="toCheckInPlan"></uni-icons>
		</view>
		<view class="tip">{{ tips }}</view>

		<view class="challenge">
			<view class="giftBox" v-for="(item, index) in list" :key="index" @click="getGift(item)">
				<image v-if="item.status === 'ed'" class="ed" src="http://qiniu.relaverse.cn/icon/giftBox_ed.png" mode="widthFix" />
				<image v-else-if="item.status === 'ing'" class="ing" src="http://qiniu.relaverse.cn/icon/giftBox.png" mode="widthFix" />
				<image v-else class="will" src="http://qiniu.relaverse.cn/icon/giftBox.png" mode="widthFix" />
				<text class="day" :class="[item.status]">{{ item.title }}</text>
			</view>

			<view class="gift_progress">
				<view class="progress" :style="{ width: progress + '%' }"></view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			title: "新人七日挑战",
			tips: "每日登录并佩戴12小时即可获得获得奖励",
			list: Array.from({ length: 7 }, (_, i) => ({
				id: i,
				title: `第${this.convertToChineseDays(i + 1)}天`,
				status: i === 0 ? "ed" : i < 2 ? "ing" : "will",
			})),
		};
	},

	computed: {
		progress() {
			return (this.list.filter((item) => item.status !== "will").length - 1) * 15;
		},
	},

	methods: {
		convertToChineseDays(day) {
			const chineseNumbers = [
				"零",
				"一",
				"二",
				"三",
				"四",
				"五",
				"六",
				"七",
				"八",
				"九",
				"十",
				"十一",
				"十二",
				"十三",
				"十四",
				"十五",
				"十六",
				"十七",
				"十八",
				"十九",
				"廿",
				"廿一",
				"廿二",
				"廿三",
				"廿四",
				"廿五",
				"廿六",
				"廿七",
				"廿八",
				"廿九",
				"卅",
				"卅一",
			];

			if (day < 1 || day > 31) {
				return "输入的天数必须在1到31之间";
			}

			return chineseNumbers[day];
		},

		toCheckInPlan() {
			uni.navigateTo({
				url: "/pages/ring/checkInPlan",
			});
		},

		getGift(gift) {
			if (gift.status === "ing") {
				// 领取奖励的逻辑
				// uni.showToast({
				// 	title: `领取${gift.title}的奖励`,
				// 	icon: "none",
				// });
				this.$emit("getGift", gift);
			}
		},
	},
};
</script>
<style lang="scss" scoped>
.new_comer_challenge {
	padding: 30rpx;
	width: calc(100% - 64rpx);
	height: 284rpx;
	box-shadow: 0px 0px 30rpx 0px rgba($color: #2359f8, $alpha: 0.4);
	background-color: rgba($color: #ffffff, $alpha: 0.4);
	border-radius: 16rpx;
	margin: 30rpx auto;

	.head {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #1952f8;
		}

		.right {
			margin-left: auto;
		}
	}

	.tip {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
		margin-top: 16rpx;
		line-height: 30rpx;
	}

	.challenge {
		width: 100%;

		display: flex;
		justify-content: space-between;
		align-items: center;

		margin-top: 30rpx;

		position: relative;

		.giftBox {
			position: relative;
			z-index: 1;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image {
				width: 64rpx;
				&.ing {
					filter: drop-shadow(1px 1px 30rpx rgba(35, 89, 248, 0.5));
				}
				&.will {
					opacity: 0.5;
				}
			}

			.day {
				font-weight: 500;
				font-size: 18rpx;
				color: #999999;
				margin-top: 20rpx;
			}

			.ing {
				color: #2359f8;
			}

			.will {
				color: black;
			}
		}

		.gift_progress {
			position: absolute;
			top: 30%;
			left: 50%;
			transform: translate(-50%, 0);
			width: calc(100% - 40rpx);
			height: 12rpx;
			background-color: rgba($color: #666666, $alpha: 0.1);
			overflow: hidden;
			z-index: 0;

			.progress {
				width: 0%;
				height: 100%;
				max-width: 100%;
				background: linear-gradient(180deg, #87d5ff 0%, #2359f8 100%);
			}
		}
	}
}
</style>
